<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三大特性</title>
    <style>
        div {
            color: green;
            font-style: oblique;
        }
        div {
            color: red;
        }
        /*   优先级   */
        /*最低*/
        * {
            /*background-color: red;*/
        }
        /*二级*/
        div {
            background-color: blue;
        }
        /*三级*/
        .my-div {
            background-color: green;
        }
        /*四级*/
        #my-div {
            background-color: gold!important;
        }
        /*五级*/
        /* 见行内 */
        /*六级*/
        /*  */
        div {
            background-color: black!important;
        }

        .nav li{
            color: #ff6700;
        }
         .nav .black {
            color: pink;
        }
    </style>
</head>
<body>
<h4>层叠性</h4>
<div>长江后浪退前浪，前浪死在沙滩上</div>
<h4>继承性</h4>
<div>
    <p>你好</p>
</div>
<h4>优先级</h4>
<div id="my-div" class="my-div" style="background-color: pink !important">
    我很好
</div>
<ul class="nav">
    <li class="black">人生四大悲</li>
    <li>家里没宽带</li>
    <li>网速不够快</li>
</ul>
</body>
</html>